<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>视频会议录制</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody videoList">
        <div v-loading="videoloading"
             element-loading-text="加载中"
             element-loading-spinner="iconfont iconluzhishipin"
             element-loading-background="rgba(0, 0, 0, 0.5)" v-if="checkVideoType" style="height: 100%">
          <!--        http://192.168.0.172/view-stream.html-->
          <div class="camera-top">
            <iframe :src="cameraUrl" frameborder="0" id="iframeBox"></iframe>
          </div>
          <div class="camera-icon" v-if="!cameraUrl">
            <!--          <i class="iconfont iconluzhishipin"></i>-->
          </div>
          <div class="camera-bottom" v-if="start">
            <span>{{ str }}</span>
          </div>
        </div>
        <div v-else class="form-box-line">
          <el-form label-width="140px" ref="editForm">
            <el-form-item label="流媒体服务：">
              <el-select v-model="recorderId" placeholder="请选择流媒体服务" size="small" @change="selectBrandFn">
                <el-option
                    v-for="item in videoRecorder"
                    :key="item.id"
                    :label="item.pointname"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="摄像头：">
              <el-select v-model="cameraId" placeholder="请选择摄像头" size="small">
                <el-option
                    v-for="item in cameraList"
                    :key="item.id"
                    :label="item.pointername"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="cornerComment-in-footer" v-if="checkVideoType">
        <el-button @click="startRecordFn" size="small" :disabled="disabledBtn">开始录制</el-button>
        <el-button @click="closeRecordFn(1)" size="small" :disabled="!disabledBtn">保存录制</el-button>
        <el-button @click="closeRecordFn(2)" type="danger" size="small" :disabled="!disabledBtn" plain>取消录制</el-button>
      </div>
      <div class="cornerComment-in-footer" v-else>
        <el-button @click="getVideoFn" size="small" :disabled="disabledBtn">确定并开始</el-button>
      </div>
    </div>
  </div>
</template>

<script>

import {mapGetters} from "vuex";
import {startPlay, startRecord, stopRecord, patrolAdd} from "@/api/admin/cameraVideo"
import {recorderIndex, recorderCamera} from "@/api/admin/cameraVideo"
import {videoMeet_add} from "@/api/admin/videoMeet"

export default {
  props: ['visible', 'meetId'],
  components: {},
  computed: {
    ...mapGetters(['configData']),
  },
  data() {
    return {
      dialogVisible: false,
      start: false,
      time: null,
      h: 0,//定义时，分，秒，毫秒并初始化为0；
      m: 0,
      ms: 0,
      s: 0,
      str: '00:00:00',
      cameraUrl: '', // 播放地址
      videoloading: true,
      disabledBtn: false,
      cameraIndex: 0, // 序列号
      camera_socketIndex: 0,
      recordIndex: 0,
      // 0 待接入 1 开启中
      status: {
        index: 0,
        socketIndex: 0,
        recordIndex: 0,
      },
      recorderId: '',
      cameraId: '',
      videoRecorder: [],
      cameraList: [],
      checkVideoType: false,
      camera_ip: 0
    }
  },
  watch: {
    'status.index'() {
      console.log('index状态变了：', this.status)
    },
    'status.socketIndex'() {
      console.log('socketIndex状态变了：', this.status)
    },
    'status.recordIndex'() {
      console.log('recordIndex状态变了：', this.status)
    },
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.url_Link = `${this.configData.video_url}${this.configData.video_port ? (':' + this.configData.video_port) : ''}`
        this.getRecorderFn()
      } else {
        this.videoloading = true
        this.closeCameraFn()
        this.reset()
      }
    }
  },
  created() {

  },
  methods: {
    // 开启直播模式获取序列号
    startCameraFn() {
      let that = this
      // 摄像头ip this.pointData.allData.camera_data.ip
      startPlay(this.url_Link, {ip: this.camera_ip}).then(res => {
        console.log('开启直播模式获取序列号:', res)
        this.cameraIndex = res.index
        this.camera_socketIndex = res.socketIndex
        setTimeout(() => {
          // that.cameraUrl = `http://${this.pointData.allData.recorder_data.ip}/view-stream.html?id=${this.pointData.allData.camera_data.id}`
          that.cameraUrl = `${this.configData.video_url}/jsmpeg-master/view-stream.html?outsidePort=${res.outsidePort}`  // 录像机ip
          that.videoloading = false
        }, 2000)
      })
    },
    // 开始录制
    startRecordFn() {
      // 摄像头ip this.pointData.allData.camera_data.ip
      startRecord(this.url_Link, {ip: this.camera_ip}).then(res => {
        this.recordIndex = res.index // 录制序列号
        this.filename = res.filename
        this.disabledBtn = true
        this.startFn()
        console.log('开始录制:', res)
      })
    },
    // 关闭整个播放/停止录制 需要关闭3个序列号
    closeCameraFn() {
      stopRecord(this.url_Link, {index: this.cameraIndex}).then(res => {
        console.log('关闭播放/停止录制:', res)
      })
      stopRecord(this.url_Link, {index: this.camera_socketIndex}).then(res => {
        console.log('关闭播放/停止录制:', res)
      })
      if (this.disabledBtn) {
        // 关闭录制
        this.closeRecordFn(2)
      }
    },
    // 关闭录制视频 序列号
    closeRecordFn(option) {
      stopRecord(this.url_Link, {index: this.recordIndex}).then(res => {
        console.log('关闭播放/停止录制:', res)
        // 停止录制进行上传链接
        this.disabledBtn = false
        this.reset()
        if (option === 1) {
          this.patrolAddFn()
        }
      })
    },
    // 关闭socket
    closeSocketFn() {

    },
    // 上传视频记录
    patrolAddFn() {
      this.reset()
      videoMeet_add({
        id: this.meetId,
        video: this.filename
      }).then(res => {
        if (!res.code) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    timer() {   //定义计时函数
      this.ms = this.ms + 5;         //毫秒
      if (this.ms >= 100) {
        this.ms = 0;
        this.s = this.s + 1;         //秒
      }
      if (this.s >= 60) {
        this.s = 0;
        this.m = this.m + 1;        //分钟
      }
      if (this.m >= 60) {
        this.m = 0;
        this.h = this.h + 1;        //小时
      }
      // this.str = this.toDub(this.h) + ":" + this.toDub(this.m) + ":" + this.toDub(this.s) + ":" + this.toDubms(this.ms);
      this.str = this.toDub(this.h) + ":" + this.toDub(this.m) + ":" + this.toDub(this.s);
      // document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒";
    },
    reset() {  //重置
      this.start = false
      clearInterval(this.time);
      this.h = 0;
      this.m = 0;
      this.ms = 0;
      this.s = 0;
      this.str = "00:00:00";
      this.recorderId = ''
      this.cameraId = ''
      this.videoRecorder = []
      this.cameraList = []
      this.checkVideoType = false
      this.camera_ip = 0
    },
    startFn() {  //开始
      if (!this.start) {
        this.start = true
        this.time = setInterval(this.timer, 50);
      } else {
        this.reset()
      }

    },
    toDub(n) {  //补0操作
      if (n < 10) {
        return "0" + n;
      } else {
        return "" + n;
      }
    },
    toDubms(n) {  //给毫秒补0操作
      if (n < 10) {
        return "0" + n;
      } else {
        return n;
      }
    },
    getVideoFn() {
      // cameraId
      // for cameraList
      if (!this.cameraId) {
        this.$message.error('选择你要打开的摄像头')
        return
      }
      for (let item of this.cameraList) {
        if (item.id === this.cameraId) {
          this.camera_ip = item.ip
        }
      }
      this.checkVideoType = true
      this.startCameraFn()
    },
    getRecorderFn(option) {
      let port_ = this.configData.video_port ? ':' + this.configData.video_port : ''
      recorderIndex(`${this.configData.video_url}${port_}`, {pageNum: 1, pageSize: 1000}).then(res => {
        console.log('获取接口的硬盘录像机:', res)
        this.videoRecorder = res.rows
        if (option === 'edit') {
          this.selectBrandFn()
        }
      })
    },
    selectBrandFn() {
      let port_ = this.configData.video_port ? ':' + this.configData.video_port : ''
      recorderCamera(`${this.configData.video_url}${port_}`, {
        recorderId: this.recorderId,
        pageNum: 1,
        pageSize: 1000
      }).then(res => {
        console.log('摄像头:', res)
        let list_ = []
        for (let item of res.rows) {
          // if (item.brand === 3) {
            list_.push(item)
          // }
        }
        this.cameraList = list_
      })
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2) !important;
  /*background:none;*/
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  background: rgba(47, 48, 74, 0.8);
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  border: 1px solid #003156;
  box-shadow: 0 0 10px #002f52;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
  color: #fff;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  /*padding: 20px;*/
  flex: 1;
  overflow-y: auto;
  position: relative;
}

.close-Btn-line {
  cursor: pointer;
}

#videoLine {
  width: 816px;
  height: 466px;
  background: rgba(0, 0, 0, .5);
}

#iframeBox {
  width: 100%;
  height: 100%;
}

.camera-top {
  height: 100%;
  background: #999;
}

.camera-bottom {
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  display: flex;
  padding: 15px 0;
  align-items: center;
  justify-content: center;
}

.camera-bottom span {
  background: red;
  color: #fff;
  display: block;
  width: 80px;
  padding: 5px 0;
  text-align: center;
  font-size: 16px;
  border-radius: 3px;
}

.camera-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.camera-icon i {
  margin: 0;
  font-size: 64px;
  color: #eee;
}

.form-box-line {
  background: #fff;
  padding: 50px;
}
</style>
<!--<div class="commentBody">-->
<!--&lt;!&ndash;        http://192.168.0.172/view-stream.html&ndash;&gt;-->
<!--<div class="camera-top">-->
<!--  <iframe src="" frameborder="0" id="iframeBox"></iframe>-->
<!--</div>-->
<!--<div class="camera-bottom">-->
<!--  00:00-->
<!--</div>-->

